<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点的创建与添加</title>
	</head>
	<body>
		<div class="yeye">
			<div class="fuqin">
				<div class="erzi">
					<span>1</span>
					<span>2</span> 
					<span>3</span>
					<span>4</span>
				</div>
			</div>
		</div>
		<script>
			// 节点的创建
			var mySpan = document.createElement('span');
			var mySpan1 = document.createElement('span');
			var mySpan2 = document.createElement('span');
			// 我要把创建的节点放在哪里  节点的添加
			var erzi = document.querySelector('.erzi');
			erzi.appendChild(mySpan);
			
			// 在任意位置添加
			erzi.insertBefore(mySpan1,erzi.children[0]);
			erzi.insertBefore(mySpan2,erzi.children[1]);
			// 每一个创建的节点只能被添加一次
			// 每次插入完节点以后，这些节点动态的进行变化。
			
			
			
		</script>
		
	</body>
</html>